<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Plugins</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/prettify.css" type="text/css" rel="stylesheet" />

<style type="text/css">
	body {
		padding-top: 60px;
		padding-bottom: 40px;
	}
	
	.sidebar-nav {
		padding: 9px 0;
	}
</style>

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/menuize.js"></script>
<script type="text/javascript" src="js/calendarize.js"></script>
</head>

<body onload="prettyPrint()">

	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a class="brand" href="index.html">jQuery Plugins</a>
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3">
				<div class="well sidebar-nav" id="sidebar-menu">
				</div>
			</div>

			<div class="span9">
				<div class="row-fluid">
					<div class="span12">
						<h2>Information</h2>
						<p>Retrieves calendar events from a <strong>public</strong> google calendar in json format.</p>
						
						<h2>Usage</h2>
						<pre class="prettyprint linenums">
$("#calendar").calendarize({apikey: 'yourApiKey', calendarid: 'publicCalendarID', results: 3, mintime: null});</pre>
						<h3>Parameters</h3>
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>Name</th>
									<th>Description</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>apikey</td>
									<td>Google Calendar API v3 key</td>
								</tr>
								<tr>
									<td>calendarid</td>
									<td>Google Calendar ID of a public calendar</td>
								</tr>
								<tr>
									<td>results</td>
									<td>Maximum number of events to retrieve</td>
								</tr>
								<tr>
									<td>mintime</td>
									<td>Minimum date and time of the events in <code>yyyy-MM-ddTHH:mm:ssZ</code> format. Default is <code>now()</code></td>
								</tr>
							</tbody>
						</table>
						
						<h2>View code</h2>
						<p>View this plugin code here: <a href="js/calendarize.js" target="blank">calendarize.js</a></p>
					</div>
				</div>
			</div>
		</div>

	</div>
	
<script>
	$("#sidebar-menu").menuize();
	
// 	$("#calendar").calendarize({apikey: 'AIzaSyCIDIrTPE0urrkfi6GxJ7elXVvBwX5hvmU', calendarid: '5bdjvntqnucnkcs0oe30c2co50@group.calendar.google.com', results: 3, mintime: null});
</script>

</body>
</html>